<template>
    <a-card>
        <div>
            <a-form layout="horizontal">
                <div class="fold">
                    <a-row>
                        <a-col :md="7" :sm="24">
                            <a-form-item label="出库单号" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                                <a-input v-model="docNum" placeholder="请输入" allowClear />
                            </a-form-item>
                        </a-col>
                        <a-col :md="7" :sm="24">
                            <a-form-item label="标签" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                                <a-input v-model="labelId" placeholder="请输入" allowClear />
                            </a-form-item>
                        </a-col>
                        <a-col :md="5" :sm="24">
                            <a-form-item label="出库类型" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                                <a-select v-model="docType">
                                    <a-select-option value="">请选择出库类型</a-select-option>
                                    <a-select-option :value="item.key" v-for="item in docTypeList" :key="item.key">
                                        {{ item.value }}
                                    </a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :md="5" :sm="24">
                            <a-form-item label="状态" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                                <a-select v-model="status">
                                    <a-select-option value="">请选择状态</a-select-option>
                                    <a-select-option :value="item.key" v-for="item in statusList" :key="item.key">
                                        {{ item.value }}
                                    </a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </div>
                <span style="float: right; margin-top: 3px">
                    <a-button type="primary" @click="query">查询</a-button>
                    <a-button @click="exportExcel" style="margin-left: 10px" :loading="logging">导出</a-button>
                </span>
            </a-form>
        </div>
        <div>
            <a-table :columns="columns" :dataSource="dataSource" :pagination="pagination" @change="paginationChange"
                :rowKey="(dataSource) => dataSource.Id" :expandedRowKeys="expandedRowKeys"  :scroll="{ x: 2400,y: 500  }">

                <template slot="time" slot-scope="text">
                    {{ text | dateTimeFormat }}
                </template>

                <template slot="docType" slot-scope="text">
                    <a-tag :color="text == 'C-001' ? 'green' : text == 'C-002' ? 'red' : 'geekblue'">
                        {{ docTypeList.find(i => i.key == text).value }}
                    </a-tag>
                </template>
                <template slot="status" slot-scope="text">
                    <a-tag :color="text === 2 ? 'green' : text < 0 ? 'red' : 'geekblue'">
                        {{ statusList.find(i => i.key == text).value }}
                    </a-tag>
                </template>
                <template slot="uploadStatus" slot-scope="text,record">
                    <a-tag :color="text ? 'green' : 'red'" v-if="record.InOrOutTime != null">
                        {{ record.IsUpLoad ? '同步成功' : '同步失败' }}
                    </a-tag>
                </template>
                <template slot="ellipsis" slot-scope="text">
                    <a-tooltip placement="bottom" :title="text">
                        {{ text.length > 20 ? text.substring(0, 20) + '...' : text }}
                    </a-tooltip>
                </template>
            </a-table>
        </div>
    </a-card>
</template>
  
<script>
import { orderService } from '/src/services'
import moment from 'moment'
import ExportJsonExcel from "js-export-excel"

const columns = [
    {
        title: '序号',
        width: 60,
        customRender: (text, record, index) => `${index + 1}`,
    },
    {
        title: '单号',
        width: 145,
        dataIndex: 'DocNum'
    },
    {
        title: '出库类型',
        width: 80,
        dataIndex: 'DocType',
        scopedSlots: { customRender: 'docType' }
    },
    {
        title: '仓库',
        width: 70,
        dataIndex: 'WareCode'
    },
    {
        title: '标签',
        width: 270,
        dataIndex: 'LabelId'
    },
    {
        title: '物料名称',
        width: 180,
        dataIndex: 'ItemName',
        scopedSlots: { customRender: 'ellipsis' }
    },
    {
        title: '数量',
        width: 70,
        dataIndex: 'Qty'
    },
    {
        title: '状态',
        width: 90,
        dataIndex: 'Status',
        scopedSlots: { customRender: 'status' }
    },
    {
        title: '出库同步',
        width: 90,
        dataIndex: 'IsUpLoad',
        scopedSlots: { customRender: 'uploadStatus' }
    },
    {
        title: '出库时间',
        width: 180,
        dataIndex: 'InOrOutTime',
        scopedSlots: { customRender: 'time' }
    },
    {
        title: '原标签',
        width: 270,
        dataIndex: 'OrigLabelId'
    },
    {
        title: '原厂料号',
        width: 150,
        dataIndex: 'PartNo'
    },
    {
        title: '批次号',
        width: 140,
        dataIndex: 'LotNo'
    },
    {
        title: 'DateCode',
        width: 130,
        dataIndex: 'DateCode'
    },
]

export default {
    name: 'DataLogReport',
    filters: {
        dateTimeFormat(val) {
            if (val == null) return ''
            return val.replace('T', ' ').substring(0, 19)
        }
    },
    data() {
        return {
            columns: columns,
            dataSource: [],
            expandedRowKeys: [],
            itemDataSource: [],
            model: {},
            type: '',
            docType: '',
            status: '',
            statusList: [
                { key: 0, value: '待出库' },
                { key: 1, value: '出库中' },
                { key: 2, value: '出库完成' },
                { key: 9, value: '拆批完成' },
                { key: -1, value: '删除' },
                { key: -2, value: '出库失败' },
            ],
            docNum: '',
            labelId: '',
            docTypeList: [
                { key: 'R-001', value: '到货入库' },
                { key: 'R-002', value: '退料入库' },
                { key: 'C-001', value: '备料出库' },
                { key: 'C-002', value: '盘点' },
                { key: 'C-009', value: '手动出库' },
                { key: 'Y-001', value: '移库' },
                { key: 'S-001', value: '拆批作业' },
                { key: 'S-002', value: '拆批入库' },
                { key: 'S-003', value: '拆批出库' },
            ],
            date: moment(),
            pagination: {
                total: 0,
                current: 1,
                pageSize: 20,
                showSizeChanger: true,
                pageSizeOptions: ['10', '20', '50', '100'],
                showTotal: (total) => `总计 ${total} 条`,
                onChange: (current, pageSize) => {
                    this.pagination.pageSize = pageSize
                    this.pagination.current = current
                    this.loadData()
                }
            },
            pageIndex: 1,
            pageSize: 15,
            logging: false,
        }
    },
    mounted: function () {
        this.loadData()
    },
    methods: {
        async paginationChange(pagination) {
            this.pagination.pageSize = pagination.pageSize
            this.pagination.current = pagination.current
            this.loadData()
        },
        async loadData() {
            var result = await orderService.getTask(1, this.docType, this.status, this.docNum, this.labelId, this.pagination.pageSize, this.pagination.current)
            if (result && result.data) {
                this.dataSource = result.data.data
                this.pagination.total = result.data.total
            }
        },
        query() {
            this.pagination.current = 1
            this.loadData()
        },
        async exportExcel() {
            this.logging = true;
            var result = await orderService.getTask(1, this.docType, this.status, this.docNum, this.labelId, 10000, 1)

            if (result && result.data) {
                var option = {};
                let dataTable = [];
                let datas = result.data.data;

                datas.forEach(item => {
                    item.CreateTime = item.CreateTime.replace('T', ' ').substring(0, 19)
                    item.InOrOutTime = item.InOrOutTime ? item.InOrOutTime.replace('T', ' ').substring(0, 19) : ''
                    item.DocType = this.docTypeList.find(i => i.key == item.DocType).value;
                    item.Status = this.statusList.find(i => i.key == item.Status).value;
                    dataTable.push(item);
                });
                var sheetFilter = [];
                var sheetHeader = [];
                columns.forEach(item => {
                    if (item.title !== "序号" && item.title !== "操作") {
                        sheetFilter.push(item.dataIndex)
                        sheetHeader.push(item.title)
                    }
                })
                option.fileName = this.$route.name + '_' + moment().format('YYYY-MM-DD');
                option.datas = [
                    {
                        sheetData: dataTable,
                        sheetName: 'sheet',
                        sheetFilter: sheetFilter,
                        sheetHeader: sheetHeader,
                    }
                ];
                var toExcel = new ExportJsonExcel(option);
                toExcel.saveExcel();
                this.logging = false;
            }

        },
    }
}
</script>
  
<style lang="less">
.fold {
    width: calc(100% - 216px);
    display: inline-block;
}

.ant-input-number-handler-wrap {
    display: none
}

.ant-table-tbody .ant-table-row-cell-break-word {
    word-break: break-all;
}

.drawer.right {
    top: 0;
}
</style>
  
  